<template>
    <div>
        <van-nav-bar title="添加车辆" left-arrow @click-left="onClickLeft" fixed/>
        <van-form @submit="onSubmit" style="padding-top:60px">
            <van-cell-group inset>
                <van-field
                    v-model="formData.driver"
                    name="车主姓名"
                    label="车主姓名"
                    placeholder="请输入车主姓名"
                    :rules="[{ required: true, message: '请输入车主姓名' }]"
                />
                <van-field
                    v-model="formData.driver_phone"
                    name="联系方式"
                    label="联系方式"
                    placeholder="联系方式"
                    :rules="[{ required: true, message: '请填写正确的联系方式',pattern: /^1(3|4|5|6|7|8|9)+\d{9}$/,  min: 11, max: 11, }]"
                />
                <van-field name="radio" label="车辆类型">
                    <template #input>
                        <van-radio-group v-model="formData.car_type1" direction="horizontal">
                            <van-radio name="small">小车</van-radio>
                            <van-radio name="big">大车</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field name="radio" label="车牌号种类">
                    <template #input>
                        <van-radio-group @change="$set(formData,'car_number','')" v-model="formData.car_type" direction="horizontal">
                            <van-radio name="BLUE">蓝牌</van-radio>
                            <van-radio name="YELLOW">黄牌</van-radio>
                            <van-radio name="GREEN">绿牌</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-cell-group>
                    <van-field :value="formData.car_number" readonly label="车牌号" @click="show = true" />
                </van-cell-group>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" class="btn">
                提交
                </van-button>
            </div>
        </van-form>
        <vnp-keyboard v-model="formData.car_number" :show.sync="show"></vnp-keyboard>
    </div>
</template>

<script>
import Keyboard from './keyboard.vue'
import VnpInput from './input.vue'
import { Toast } from 'vant'
export default {
    components: { 
        'vnp-keyboard': Keyboard,
        'vnp-input': VnpInput
    },
    data() { 
        return { 
            groupChecked: ['1'],
            checked: false,
            checked1: '1',
            show: false,
            value1: '',
            value2: '川A',
            code: '',
            formData: {}
        }
    },
    methods: { 
        onClickLeft() {
            this.$router.go(-1);
        },
        async onSubmit() { 
            try { 
                const { car_type, car_number } = this.formData
                if(!car_number) return Toast('请输入车牌号')
                if(car_type === 'GREEN' && car_number.length < 8)return Toast('请输入八位数车牌号')
                if(car_type === 'BLUE' && car_number.length !== 7)return Toast('请输入七位车牌号')
                if(car_type === 'YELLOW' && car_number.length !== 7)return Toast('请输入七位车牌号')
                const { data : res } = await this.$api.Car.addCar({
                    userId: localStorage.userid,
                    ...this.formData,
                    userName: localStorage.name
                })
                if(res.code)return Toast(res.msg)
                this.$router.go(-1);
            }catch(e) { 
                console.log(e);
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.bottom-button{ 
    border: #2d8cf0;
    background: #2d8cf0;
}
.btn{
    background: #2d8cf0;
    border: #2d8cf0;
}
</style>